<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-18 14:44:46
-->
<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-11 14:38:41
-->
<template>
  <div class="container">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-if="list.length">
        <div class="list_item" v-for="item in list" :key="item.questionId">
          <div class="title">时间：{{ item.createTime }}</div>
          <div class="info">
            <div>
              <span>订单ID:</span>
              <span>{{ item.orderId }}</span>
            </div>
            <div>
              <span>订单名称:</span>
              <span>{{ item.orderName }}</span>
              <span>订单类型:</span>
              <span class="small_title">{{
                filterOrderType(item.orderType)
              }}</span>
            </div>
            <div>
              <span>订单单价:</span>
              <span class="small_title">{{ item.price }}金石</span>
              <span>支付方式:</span>
              <span class="small_title">{{ filterpayType(item.payType) }}</span>
            </div>
          </div>
        </div>
      </div>
      <van-empty v-else description="暂无数据"> </van-empty>
    </van-list>
  </div>
</template>


<script>
import { defineComponent, reactive, ref } from "vue";
import { ApiGetMyProfit } from "@/api/my";
import filter from "@/utils/filter.js";
export default defineComponent({
  setup() {
    const { filterpayType, filterOrderType } = filter();

    const loading = ref(false);
    const finished = ref(false);
    const list = ref([]);

    const query = reactive({
      capitalType: 1,
      orgCode: 1,
      type: 0,
      pageIndex: 0,
      pageSize: 10,
    });
    const onLoad = async () => {
      query.pageIndex++;
      const res = await ApiGetMyProfit(query);
      if (res && res.length) {
        list.value = list.value.concat(res[0].billDetailsRsp);
        loading.value = false;
        if (res.length <= 0) {
          finished.value = true;
        } else {
          finished.value = false;
        }
      }else{
          finished.value = true;
      }
    };

    return {
      list,
      loading,
      finished,
      filterpayType,
      filterOrderType,
      onLoad,
    };
  },
});
</script>


<style lang="scss" scoped>
.list_item {
  border: 1px solid #e7e7e7;
  font-size: 14px;
  margin: 10px 5px;
  border-radius: 5px;
  overflow: hidden;
  .title {
    color: #535252;
    height: 30px;
    background: #f0ecec;
    line-height: 30px;
    padding: 0 5px;
  }
  .info {
    padding: 5px;
    div {
      margin-bottom: 5px;
      color: #242323;
    }
    .small_title {
      margin-right: 10px;
      color: #535252;
    }
  }
}
</style>